import React, { Component } from 'react'
import './index.css';
export default class index extends Component {
    render() {
        let {data} = this.props;
        return (
            <ul className="todo-main">
                {
                   data.map(item =>{
                    return <li  key={item.id} >
                        <label>
                            <input type="checkbox" checked={item.done} onChange={this.change(item.id)}/>
                            <span>{item.title}</span>
                        </label>
                        <button className="btn btn-danger" 
                        style={{ display: item.done ?'block':'none' }}
                        onClick = {this.detele(item.id)}
                        >删除</button>
                    </li>
                   }) 
                }
        </ul>
        )
        
    }
    // 选中标签
    change = (id)=>{
       return (e)=>{
        let status = e.target.checked;
        this.props.statueChange(id,status);
       }
        
    }
    // 删除
    detele = (id)=>{
        return ()=>{
            this.props.delete(id);
        }
    }
}
